<template>
	<view class="warranty-list">
		<view class="warranty-list-wrap">
			<image class="header-img" src="/static/images/1_r1_c1.jpg"></image>
			
			<view class="title">电子质保卡列表</view>
			
			<view class="content" v-for="(item,index) in list" :key="item.serialNo">
				<view class="content-cell">
					<view class="content-cell-label space-10">订单号</view>
					<view class="content-cell-label">：</view>
					<view class="content-cell-control">{{item.sourceTradeNos}}</view>
				</view>
				<view class="content-cell">
					<view class="content-cell-label">购买渠道：</view>
					<view class="content-cell-control">{{item.shopName}}</view>
				</view>
				<view class="content-cell">
					<view class="content-cell-label">购买日期：</view>
					<view class="content-cell-control">{{item.tradeTime}}</view>
				</view>
				<view class="goods-list" v-if="!!showMoreTypes[index]">
					<view class="header-title">产品信息</view>
					<view class="goods-list-title">
						<view class="fitst-cell">序号</view>
						<view class="second-cell">商品编码</view>
						<view class="third-cell">商品名称</view>
						<view class="fourth-cell">数量</view>
						<view class="action-cell">操作</view>
					</view>
					<view class="goods-list-cell" v-for="(order,i) in warrantyInfoList[item.sourceTradeNos]" :key="order.goodsNo">
						<view class="fitst-cell">{{i + 1}}</view>
						<view class="second-cell">{{order.goodsNo}}</view>
						<view class="third-cell">{{order.goodsName}}</view>
						<view class="fourth-cell">{{order.sellCount}}</view>
						<view class="action-cell">
							<button class="get-btn" v-if="order.isGet === 0" v-on:click="handleWarrantyCertificate({
								serialNo: order.serialNo,
								sourceTradeNos: item.sourceTradeNos
							})">领取质保单</button>
							<button class="get-btn disabled" v-if="order.isGet === 1" v-on:click="gotoSerialDetail(order.serialNo)">查看质保单</button>
							<button class="get-btn disabled" v-if="order.isGet === 2">已退款</button>
						</view>
					</view>
				</view>
				<view class="detail-wrap" v-on:click="showMore(index)">
					<!-- <view class="detail" v-on:click="gotoWarrantyResult(item.serialNo)"> -->
					<view class="detail">
						<image v-if="!!showMoreTypes[index]" class="arrow-top" src="/static/images/1991719588729_.pic.jpg"></image>
						<text v-if="!!showMoreTypes[index]">收起详情</text>
						<text v-else>查看详情</text>
						<image v-if="!showMoreTypes[index]" class="arrow-bottom" src="/static/images/WechatIMG210.png"></image>
					</view>
				</view>
			</view>
			
			<!-- <view class="no-more" v-if="isEnd">--- 没有更多了 ---</view> -->
			
			<view class="customer-icon" @tap="goGoodCall">
				<text class="iconfont icon-ic_customerservice fs-40"></text>
				<text class="fs-18">客服</text>
			</view>
			<view class="goback-icon" @tap="goTop">
				<text class="iconfont icon-ic_up2 fs-40"></text>
				<text class="fs-18">置顶</text>
			</view>
			<pageFooter :style="colorStyle"></pageFooter>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { toLogin } from '@/libs/login.js';
	import pageFooter from '@/components/pageFooter/index.vue'
	import { getWarrantyList, getOrderByOrderNo, getWarrantyCertificate } from '@/api/warranty.js';
	export default {
		name: "WarrantyList",
		components: {
		  pageFooter
		},
		data() {
			return {
				page: 1,
				pageSize: 999,
				list: [],
				isEnd: false,
				showMoreTypes: {},
				warrantyInfoList: {}
			};
		},
		computed: {
		  ...mapGetters({
		    isLogin: 'isLogin'
		  })
		},
		mounted() {
			if(this.isLogin === false) {
				toLogin(true);
			}
		},
		onShow() {
			if(this.isLogin) {
				this.getList(this.page);
			}
		},
		onLoad(options) {
	
		},
		onReachBottom : function(e) {
			// if(!this.isEnd) {
			// 	this.page = this.page + 1;
			// 	this.getList(this.page);
			// }
		},
		methods: {
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			goGoodCall() {
				let userInfo = uni.getStorage("USER_INFO")
				// let url = `/pages/extension/customer_list/chat?productId=${this.id}`
				// let obj = {
				// 	store_name: this.storeInfo.store_name,
				// 	path: `/pages/goods_details/index?id=${this.storeInfo.id}`,
				// 	image:this.storeInfo.image
				// }
				this.$util.getCustomer(userInfo, null, null, 0)
			},
			gotoSerialDetail(serialNo) {
				uni.navigateTo({
					url:"/pages/warranty/result?serialId=" + serialNo
				})
			},
			showMore(index) {
				this.showMoreTypes = {
					...this.showMoreTypes,
					[index]: !this.showMoreTypes[index]
				}
			},
			gotoWarrantyResult(serialId) {
				uni.navigateTo({
					url:"/pages/warranty/result?serialId=" + serialId
				})
			},
			getList(page) {
				getWarrantyList({
					page,
					pageSize: this.pageSize
				}).then((res) => {
					if(res?.status === 200 && res?.data) {
						this.list = res?.data;
						res?.data.forEach(item => {
							this.getOrderInfo(item.sourceTradeNos);
						})
					}
				}).catch((msg) => {
					if(msg === '暂无数据'){
						this.isEnd = true;
					}
				})
			},
			getOrderInfo(sourceTradeNos) {
				getOrderByOrderNo({sourceTradeNos}).then((res) => {
					if(res?.status === 200 && res?.data) {
						this.warrantyInfoList = {
							...this.warrantyInfoList,
							[sourceTradeNos]: res.data.subOrderInfo
						};
					} else {
						uni.showToast({
							icon: 'error',
							title: "订单号无效！"
						})
					}
				}).catch((msg) => {
					uni.showToast({
						icon: 'error',
						title: msg && typeof msg === "string" ? msg : "订单号无效！"
					})
				});
			},
			handleWarrantyCertificate(item) {
				getWarrantyCertificate({serialNo: item.serialNo}).then((res) => {
					if(res?.status === 200) {
						this.getOrderInfo(item.sourceTradeNos);
						uni.showToast({
							title: "领取成功！"
						}).then(() => {
							uni.navigateTo({
								url:"/pages/warranty/result?serialId=" + serialNo
							})
						})
					} else {
						uni.showToast({
							icon: 'error',
							title: "领取失败！"
						})
					}
				}).catch((msg) => {
					uni.showToast({
						icon: 'error',
						title: msg && typeof msg === "string" ? msg : "领取失败！"
					})
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	.warranty-list {
		background-color: #86151a;
		padding-top: 62rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		
		.warranty-list-wrap {
			min-height: 100vh;
			background: url("@/static/images/1_r3_c1.jpg");
			background-size: contain;
			padding-bottom: 156rpx;
			border-bottom: 16rpx solid #86151a;
		}
		
		.header-img {
			height: 168rpx;
			width: 750rpx;
		}
		
		.title {
			color: #86151a;
			font-size: 32rpx;
			font-weight: 400;
			margin-top: 40rpx;
			text-align: center;
		}
		
		.content {
			padding: 60rpx 60rpx 0;
			
			&-cell {
				display: flex;
				align-items: center;
				line-height: 84rpx;
				border-bottom: 1rpx dashed #ddd;
				
				&-label {
					color: #666;
					font-weight: 200;
				}
				
				&-control {
					color: #86151a;
				}
			}
		}
		
		.detail-wrap {
			text-align: center;
		}
		
		.detail {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 20rpx 0;
			font-weight: 200;
			
			.arrow-top {
				margin-bottom: 8rpx;
				height: 12rpx;
				width: 20rpx;
			}
			
			.arrow-bottom {
				margin-top: 8rpx;
				height: 12rpx;
				width: 20rpx;
			}
		}
		
		.no-more {
			color: #86151a;
			font-size: 32rpx;
			font-weight: 400;
			margin: 40rpx 0;
			text-align: center;
		}
		
		.goods-list {
			position: relative;
			border: 1rpx solid #86151a;
			margin: 80rpx 0;
			border-radius: 4rpx;
			padding: 40rpx 0 20rpx;
			
			.header-title {
				position: absolute;
				top: -28rpx;
				left: 234rpx;
				font-size: 28rpx;
				padding: 4rpx 36rpx;
				color: #fff;
				font-weight: 200;
				border-radius: 4rpx;
				background-color: #86151a;
			}
			.goods-list-title, .goods-list-cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 12rpx 16rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 200;
			}
			
			>view {
				word-wrap:break-word;
			}
			
			.fitst-cell {
				width: 60rpx;
			}
			
			.second-cell {
				width: 100rpx;
			}
			
			.third-cell {
				flex: 1;
			}
			
			.fourth-cell {
				width: 60rpx;
			}
			
			.action-cell {
				width: 150rpx;
			}
			
			.get-btn {
				color: #fff;
				width: 146rpx;
				margin: 0 auto;
				border-radius: 4rpx;
				font-size: 24rpx;
				font-weight: 200;
				padding: 4rpx 8rpx;
				border: 2rpx solid #86151a;
				background-color: #86151a;
				
				&.disabled {
					border: 2rpx solid #adacac;
					background-color: #adacac;
				}
			}
		}
	}
	
	.customer-icon {
		position: fixed;
		bottom: 280rpx;
		right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 0 6rpx #750c1082;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background-color: #750c1082;
		border-radius: 50%;
		margin-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		margin-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
	.goback-icon {
		position: fixed;
		bottom: 160rpx;
		right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 0 6rpx #750c1082;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background-color: #750c1082;
		border-radius: 50%;
		margin-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		margin-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
</style>